<template>
  <div class="dashboard-container-content-center-part2">
    <div
      class="dashboard-container-content-center-part2-item"
      v-for="(item, index) in list"
      :key="index"
    >
      <div class="dashboard-container-content-center-part2-item-title">
        {{ item.title }}
      </div>
      <img
        :src="item.img"
        :alt="item.img"
        class="dashboard-container-content-center-part2-item-img"
      />
      <div
        class="dashboard-container-content-center-part2-item-btn"
        @click="handleClick(item, index)"
      >
        进入
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ContentCenterPart2",
  components: {},
  data() {
    return {
      list: [
        // {
        //   title: "一般数据",
        //   img: require("../../../assets/images/img01@1x.png"),
        //   html: "",
        //   path: "/classifyCategory/general"
        // },
        // {
        //   title: "重要核心数据",
        //   img: require("../../../assets/images/img02@1x.png"),
        //   html: "",
        //   path: "/classifyCategory/importantCritical"
        // },
        {
          title: "账号状态校验",
          img: require("../../../assets/images/img01@1x.png"),
          html: "",
          path: "/accountPermission",
        },
        {
          title: "异常账号检测",
          img: require("../../../assets/images/img02@1x.png"),
          html: "",
          path: "/accountPermission",
        },
        {
          title: "金库审批管理",
          img: require("../../../assets/images/img03@1x.png"),
          html: "",
          path: "/vaultApply",
        },
        {
          title: "异常审批检测",
          img: require("../../../assets/images/img04@1x.png"),
          html: "",
          path: "/vaultApply",
        },
        // {
        //   title: "日志审计分析",
        //   img: require("../../../assets/images/img04@1x.png"),
        //   html: "",
        //   path: "/logAudit",
        // },
      ],
      currentItem: {},
      currentIndex: 0,
    };
  },
  methods: {
    handleClick(item, index) {
      console.log(
        "%c [ index ] -> ",
        "font-size:16px; background:#83fc14; color:#c7ff58;",
        index
      );
      this.currentItem = item;
      this.currentIndex = index;
      this.$router.push(item.path);
    },
  },
};
</script>
<style lang="scss" scoped>
.text-indent {
  text-indent: 24px;
}
.dashboard-container-content-center-part2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  &-item {
    background-color: #fff;
    padding: 35px 18px 25px;
    width: 180px;
    height: 270px;
    background: url("../../../assets/images/box08@1x.png") no-repeat center
      center;
    background-size: 100% 100%;
    box-shadow: 0px 20px 101px 0px #0303033f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    &-title {
      font-family: MiSans;
      font-weight: bold;
      font-size: 16px;
      line-height: normal;
      letter-spacing: 0px;
      text-align: left;
      background: linear-gradient(95.91deg, #6ddcff 0%, #7f60f9 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    &-img {
      width: 100px;
      height: 100px;
    }
    &-btn {
      width: 120px;
      height: 28px;
      position: relative;
      border-radius: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-family: MiSans;
      font-weight: medium;
      font-size: 12px;
      background: transparent;
      cursor: pointer;
      transition: all 0.3s ease;
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 30px;
        padding: 1px;
        background: linear-gradient(to right, #8f41e9, #578aef);
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
      }
      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }
      &:active {
        transform: scale(0.95);
        background: rgba(255, 255, 255, 0.2);
      }
    }
  }
}
</style>
